<template>
  <div class="app-container">
    <el-tabs type="border-card">
      <el-tab-pane label="批量录入">
        请点击单题录入
      </el-tab-pane>
      <el-tab-pane label="单题录入">
        <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-form-item v-model="ruleForm" prop="classification" label="试题分类">
            <el-select label="" v-model="ruleForm.classification" placeholder="请选择" class="el-select">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          </br>
          <el-form-item v-model="ruleForm" prop="type" label="试题类型">
            <el-select v-model="ruleForm.type" placeholder="请选择" @change="changes">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          </br>
          <el-form-item v-model="ruleForm" prop="difficulty" label="试题难度">
            <el-select v-model="ruleForm.difficulty" placeholder="请选择">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          </br>
          <el-form-item v-model="ruleForm" prop="sign" label="试题标签">
            <el-select v-model="ruleForm.sign" placeholder="请选择">
              <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <hr class="el-hr">
          <el-form-item label="题干" style="margin-left: -60px" class="demo-ruleForm" prop="stem">
            <el-input type="textarea" v-model="ruleForm.stem" placeholder="题干，点此编辑(必填)" class="input2"></el-input>
          </el-form-item>
          <!--   单选-->
            <el-form-item v-show="kaiguan"
              v-for="(domain, index) in ruleForm.domains"
              :prop="'domains.' + index + '.value'"
            >
               <span slot="label">
                  <el-checkbox :label="String.fromCharCode(65+index)" v-model="domain.whether"></el-checkbox>
                </span>
              <el-input v-model="domain.describes" class="input1"></el-input>
              <el-form-item class="btn1">
                <el-button type="danger" icon="el-icon-delete" circle  @click.prevent="removeDomain(domain)"></el-button>
              </el-form-item>


            </el-form-item>
              <el-form-item>
              <el-button @click="addDomain"  type="success" v-show="kaiguan">新增选项</el-button>
            </el-form-item>

                <!--   多选-->
            <el-form-item v-show="kaiguan1"
              v-for="(domain, index) in ruleForm.domains"
              :prop="'domains.' + index + '.value'"
              >
                <span slot="label">
                  <el-checkbox :label="String.fromCharCode(65+index)" v-model="domain.whether" ></el-checkbox>
                </span>
              <el-input v-model="domain.describes" class="input1"></el-input>
              <el-form-item class="btn1">
                <el-button type="danger" icon="el-icon-delete" circle  @click.prevent="removeDomain(domain)"></el-button>
              </el-form-item>
            </el-form-item>
            <el-form-item  >
              <el-button @click="addDomain"  v-show="kaiguan1" type="success" >新增选项</el-button>
            </el-form-item>
          <el-form-item label="解析" style="margin-left: -60px" prop="analysis">
            <el-input type="textarea" v-model="ruleForm.analysis" placeholder="题目解析，点此编辑(选填)" class="input2"></el-input>
          </el-form-item>
          <el-button type="primary" @click="submitForm" style="margin-left: -3px">录入</el-button>
          <el-button type="primary" @click="resetForm('ruleForm')" style="margin-left: 44px">重置</el-button>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="智能录入"> 请点击单题录入</el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import {insertInto} from "@/api/system/test";
export default {
  name: "index",
  data() {
    return {

//循环添加
      count: 0,

      /**
       * 单选选项开关
       */
      kaiguan: false,
      /**
       * 多选开关
       */
      kaiguan1: false,

      /**
       * 试题分类
       */
      options: [{
        value: '语文',
        label: '语文'
      }, {
        value: '数学',
        label: '数学'
      }, {
        value: '英语',
        label: '英语'
      }],
      /**
       * 试题类型
       */
      options1: [{
        value: '单选题',
        label: '单选题'
      }, {
        value: '多选题',
        label: '多选题'
      },
        {
          value: '填空题',
          label: '填空题'
        },
      ],
      /**
       * 试题难度
       */
      options2: [{
        value: '容易',
        label: '容易'
      }, {
        value: '普通',
        label: '普通'
      }, {
        value: '稍难',
        label: '稍难'
      }],
      /**
       * 试题标签
       */
      options3: [{
        value: '甲',
        label: '甲'
      }, {
        value: '乙',
        label: '乙'
      }, {
        value: '丙',
        label: '丙'
      }],
      ruleForm: {
        //试题分类
        classification: '',
        //试题类型
        type: '',
        //试题难度
        difficulty: '',
        //试题标签
        sign: '',
        //题干
        desc: '',
        //解析
        analysis: '',
        //填空题
        desc2: '',
        //多选题
        domains: [{
          value:'',
        }],

        //选项描述
        describes: '',
        //是否正确答案
        whether: '',
      },
      // 表单校验
      rules: {
        classification: [
          {required: true, message: "试题分类不能为空", trigger: "blur"}
        ],
        type: [
          {required: true, message: "试题类型不能为空", trigger: "blur"}
        ],
        difficulty: [
          {required: true, message: "试题难度不能为空", trigger: "blur"}
        ],
        sign: [
          {required: true, message: "试题标签不能为空", trigger: "blur"}
        ],
        stem: [
          {required: true, message: "题干不能为空", trigger: "blur"}
        ],
        analysis: [
          {required: true, message: "解析不能为空", trigger: "blur"}
        ],

      }
    }
  },
  methods: {
    /**
     * 选项的隐藏与打开
     */
    changes() {
      if (this.ruleForm.type == '单选题') {
        this.kaiguan = true
        this.kaiguan1 = false

      } else if (this.ruleForm.type == '多选题') {
        this.kaiguan = false
        this.kaiguan1 = true

      }
    },

    /**
     * 表单提交
     * @param formName
     */
    submitForm: function () {
       console.info(JSON.stringify(this.ruleForm))
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          insertInto(this.ruleForm).then(response => {
            this.$modal.msgSuccess("录入成功")
            this.ruleForm={
              domains:[],
              type:undefined
            };

            this.kaiguan=true;


          });
        } else {
          console.log('录入失败');
          return false;
        }
      });
    },
    /**
     * 表单重置
     * @param formName
     */
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //新增选项
    addDomain() {
      this.ruleForm.domains.push({
        value: '',
        key: Date.now()
      });
    },
  //删除选项
    removeDomain(item) {
      this.count--
      let index = this.ruleForm.domains.indexOf(item)
      if (index !== -1) {
        this.ruleForm.domains.splice(index, 1)
      }
    },
    // 索引转26个字母 0对应A, 25对应Z
    filterLetters(i) {
      if (i >= 0 && i <= 25) {
        return String.fromCharCode(65 + i);
      } else {
        return undefined;
      }
    },
  }
}
</script>

<style scoped>

.el-select {
  background: transparent;
}

.el-select-dropdown {
  background-color: #00afff;
  border: 1px solid blue;
}

.el-hr {
  margin-left: -15px;
  width: 1344px;
}

.el-form-tg {
  border-color: transparent;

}

.demo-ruleForm {
  border: 0;
}
.btn1{
  float: left;
  margin-left: 300px;
 margin-top: 5px;
}
.input1{
  width: 300px;
  margin-left: -340px;
}
.input2{
  width: 300px;
}


</style>

